import type { StoreInfo } from "@/Interface/StoreInfoInterface";
import style from "./style.module.scss";
import { useMonthStore } from "@/stores/monthStore";
import { useBasicDataStore } from "@/stores/basicDataStore";

const PromotionList: React.FC = () => {
  const basicData = useBasicDataStore(status => status.basicData) as StoreInfo
  const curMonth = useMonthStore(state => state.month)

  const { newMembers, consumptionRatio, repurchaseRate } = basicData.monthlyData[curMonth - 1].membership

  return (
    <div className={style.membershipList}>
      <h4>{curMonth}月会员数据分析</h4>
      <table className={style.content}>
        <thead>
          <tr>
            <th>新增会员量</th>
            <th>会员消费占比</th>
            <th>会员复购率</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{newMembers}</td>
            <td>{consumptionRatio}</td>
            <td>{repurchaseRate}</td>
          </tr>
        </tbody>
      </table>
    </div>
  )
}

export default PromotionList